<template>
  <div class="columns">
    <div class="column is-full">
      <el-card
          class="box-card"
          shadow="never"
      >
        <div
            slot="header"
            class="clearfix"
        >
          <span><i class="fa fa fa-book">学习指导</i></span>
        </div>
        <div>
          <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              class="demo-ruleForm"
          >
            <el-form-item prop="title">
              <el-input
                  v-model="ruleForm.title"
                  placeholder="输入名称"
              />
            </el-form-item>

            <!--Markdown-->
            <div id="vditor"/>

            <el-form-item>
              <el-button
                  type="primary"
                  @click="submitForm('ruleForm')"
              >发布
              </el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {post} from '@/api/post'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import image from "element-ui/packages/image";
import axios from "axios";
import {addArticle} from "@/api/article";
import {addStudyGuide} from "@/api/study-guide";

export default {
  name: 'StudyGuideCreate',

  data() {
    return {
      tip:this.$route.params.tip,
      contentEditor: {},
      ruleForm: {
        title: '', // 标题
        content: '',// 内容
      },
      rules: {
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {
            min: 1,
            max: 25,
            message: '长度在 1 到 25 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.setEditor()
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
              this.contentEditor.getValue().length === 1 ||
              this.contentEditor.getValue() == null ||
              this.contentEditor.getValue() === ''
          ) {
            this.$message.warning('内容不可为空')
            return false
          }

          this.ruleForm.content = this.contentEditor.getValue()
          addStudyGuide(this.ruleForm).then((response) => {
            const {data} = response
            setTimeout(() => {
              this.$router.push({
                name: 'StudyGuideDetail',
                params: {id: data}
              })
            }, 800)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.contentEditor.setValue('')
      this.ruleForm.tags = ''
    },
    setEditor(){
      this.contentEditor = new Vditor('vditor', {
        height: 500,
        placeholder: '此处为内容……',
        theme: 'classic',
        upload: {
          url: 'http://localhost:8000/api/upload',
          accept: 'image/*',
          headers: {
            Authorization: localStorage.getItem('Authorization')
          },
          fieldName: 'file',
          success: (editor, msg) => {
            console.log(msg)
            let res = JSON.parse(msg)
            const fileName = res.data.fileName;
            let imageurl = 'http://localhost:8000/api/image/' + fileName
            this.contentEditor.insertValue(`![image](${imageurl})`);
          },
        },
        counter: {
          enable: true,
          type: 'markdown'
        },
        preview: {
          delay: 0,
          hljs: {
            style: 'monokai',
            lineNumber: true
          }
        },
        tab: '\t',
        typewriterMode: true,
        toolbarConfig: {
          pin: true
        },
        cache: {
          enable: false
        },
        mode: 'sv'
      })
    }
  }
}
</script>

<style>
</style>
